<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            background-image: url('https://img.haruka.net.cn/image/0/2024/09/15/2cavqd-0.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: rgb(18, 18, 18);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 44px;
            position: fixed;
            top: 0;
            width: 100%;
            min-width: 1747px;
            z-index: 1000;
        }

        /* 导航栏内部的图标和链接样式 */
        .navbar a {
            color: rgb(208, 208, 208);
            text-decoration: none;
            padding: 0 22px;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            display: flex;
            align-items: center;
            height: 100%;
            font-family: San Francisco, PingHei;
        }

        /* 图标SVG的样式 */
        .navbar svg {
            fill: rgb(208, 208, 208);
            height: 44px;
            width: 24px;
            margin-right: 8px;
        }

        .navbar .logo {
            margin-right: auto;
        }

        .logo {
            position: relative;
            left: 380px;
        }

        .icons {
            position: relative;
            right: 380px;
        }

        .navbar .icons {
            margin-left: auto;
            display: flex;
        }

        /* 搜索与购物车的hover效果 */
        .navbar a:hover {
            background-color: #555;
        }

        /* 内容区样式 */
        .welcome-section {
            padding: 80px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .welcome-section h1 {
            color: #e0e0ea;
            font-size: 32px;
            line-height: 1.25;
            font-weight: 600;
            position: relative;
            right: 28px;
        }

        .welcome-section h2.product-name {
            font-size: 28px;
            line-height: 1.28571;
            font-weight: 600;
        }

        .welcome-section p.product-availability {
            display: block;
            margin: 0.5em 0;
            font-size: 17px;
            line-height: 1.47059;
            font-weight: 400;
            color: #5d5d62;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 1em;
            justify-content: center;
        }

        p.product-availability {
            position: relative;
            top: 75px;
            right: 30px;
        }

        .action-buttons {
            position: relative;
            top: 66px;
            right: 30px;
        }

        .button-primary {
            padding: 7px 15px;
            border-radius: 980px;
            background-color: #0071e3;
            color: #fff;
            text-decoration: none;
            border: none;
            font-size: 17px;
            line-height: 1.17648;
            font-weight: 400;
        }

        .button-primary:hover {
            background-color: #0057e3;
        }

        .button-primary:active {
            background-color: #0062d2;
        }

        .button-tertiary {
            padding: 7px 15px;
            border-radius: 980px;
            background-color: transparent;
            color: #0071e3;
            text-decoration: none;
            border: 1px solid #0071e3;
            font-size: 17px;
            line-height: 1.17648;
            font-weight: 400;
        }

        .button-tertiary:hover {
            background-color: #f0f0f5;
        }

        .button-tertiary:active {
            background-color: #e0e0ea;
        }
    </style>
</head>

<body>

    <!-- 导航栏 -->
    <div class="navbar">
        <!-- 苹果图标 -->
        <a href="#" class="logo">
            <svg height="44" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="m15.5752 19.0792a4.2055 4.2055 0 0 0 -2.01 3.5376 4.0931 4.0931 0 0 0 2.4908 3.7542 9.7779 9.7779 0 0 1 -1.2755 2.6351c-.7941 1.1431-1.6244 2.2862-2.8878 2.2862s-1.5883-.734-3.0443-.734c-1.42 0-1.9252.7581-3.08.7581s-1.9611-1.0589-2.8876-2.3584a11.3987 11.3987 0 0 1 -1.9373-6.1487c0-3.61 2.3464-5.523 4.6566-5.523 1.2274 0 2.25.8062 3.02.8062.734 0 1.8771-.8543 3.2729-.8543a4.3778 4.3778 0 0 1 3.6822 1.841zm-6.8586-2.0456a1.3865 1.3865 0 0 1 -.2527-.024 1.6557 1.6557 0 0 1 -.0361-.337 4.0341 4.0341 0 0 1 1.0228-2.5148 4.1571 4.1571 0 0 1 2.7314-1.4078 1.7815 1.7815 0 0 1 .0361.373 4.1487 4.1487 0 0 1 -.9867 2.587 3.6039 3.6039 0 0 1 -2.5148 1.3236z">
                </path>
            </svg>
        </a>
        <!-- 导航链接 -->
        <a href="#">商店</a>
        <a href="#">Mac</a>
        <a href="#">iPad</a>
        <a href="#">iPhone</a>
        <a href="#">Watch</a>
        <a href="#">Vison</a>
        <a href="#">AirPods</a>
        <a href="#">家居</a>
        <a href="#">娱乐</a>
        <a href="#">技术支持</a>
        <!-- 搜索和购物车图标 -->
        <div class="icons">
            <a href="#">
                <svg height="24" viewBox="0 0 17 48" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m16.2294 29.9556-4.1755-4.0821a6.4711 6.4711 0 1 0 -1.2839 1.2625l4.2005 4.1066a.9.9 0 1 0 1.2588-1.287zm-14.5294-8.0017a5.2455 5.2455 0 1 1 5.2455 5.2527 5.2549 5.2549 0 0 1 -5.2455-5.2527z">
                    </path>
                </svg>
            </a>
            <a href="#">
                <svg height="24" viewBox="0 0 17 48" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m13.4575 16.9268h-1.1353a3.8394 3.8394 0 0 0 -7.6444 0h-1.1353a2.6032 2.6032 0 0 0 -2.6 2.6v8.9232a2.6032 2.6032 0 0 0 2.6 2.6h9.915a2.6032 2.6032 0 0 0 2.6-2.6v-8.9231a2.6032 2.6032 0 0 0 -2.6-2.6001zm-4.9575-2.2768a2.658 2.658 0 0 1 2.6221 2.2764h-5.2442a2.658 2.658 0 0 1 2.6221-2.2764zm6.3574 13.8a1.4014 1.4014 0 0 1 -1.4 1.4h-9.9149a1.4014 1.4014 0 0 1 -1.4-1.4v-8.9231a1.4014 1.4014 0 0 1 1.4-1.4h9.915a1.4014 1.4014 0 0 1 1.4 1.4z">
                    </path>
                </svg>
            </a>
        </div>
    </div>

    <!-- 内容区：测试导航栏效果 -->
    <div class="welcome-section" style="padding: 80px 20px;">
        <h1>来看看我们最吊炸天的设备</h1>
        <p class="product-availability">9 月 20 日发售</p>
        <div class="action-buttons">
            <a class="button-primary" aria-label="进一步了解 iPhone 16 Pro"
                href="https://www.apple.com.cn/iphone-16-pro/">进一步了解</a>
            <a class="button-tertiary" aria-label="预购 iPhone 16 Pro"
                href="https://www.apple.com.cn/shop/buy-iphone/iphone-16-pro">预购</a>
        </div>
    </div>
</body>

</html>